<template>
	<div class="toolbar">
		<a-popover :title="tool.name"
							 v-for="tool in toolsStore.tools"
							 :key="tool.key"
							 placement="right"
		>
			<template #content>
				<span class="tool-text">{{ tool.description }}</span>
			</template>
			<a-button
				class="toolbar-tool"
				:icon="getToolIcon(tool.key)"
				:type="tool.key === toolsStore.activeToolKey ? 'primary' : 'default'"
				size="small"
				@click="selectTool(tool.key)"
			>
			</a-button>
		</a-popover>

		<!--			<a-divider type="vertical"/>-->

		<!--			<a-button-->
		<!--				icon="folder-open"-->
		<!--				size="small"-->
		<!--				@click="showSceneManager = true"-->
		<!--			>-->
		<!--				场景管理-->
		<!--			</a-button>-->

		<!--			<a-button-->
		<!--				icon="save"-->
		<!--				size="small"-->
		<!--				:loading="sceneStore.isSaving"-->
		<!--				@click="saveCurrentScene">-->
		<!--				{{ sceneStore.isSaving ? '保存中...' : '保存场景' }}-->
		<!--			</a-button>-->
	</div>

	<!-- 场景管理弹窗 -->
	<a-modal
		title="场景管理"
		:open="showSceneManager"
		:width="600"
		@cancel="showSceneManager = false"
	>
		<scene-manager @close="showSceneManager = false"/>
	</a-modal>
</template>

<script setup lang="ts">
import {h, ref} from 'vue';
import {useToolsStore} from '@/store/modules/tools';
import {useSceneStore} from '@/store/modules/scene';
import SceneManager from './SceneManager.vue';
// 引入Ant Design图标组件
import {
	CarOutlined,
	DeleteOutlined,
	FullscreenOutlined
} from '@ant-design/icons-vue';
// 工具状态
const toolsStore = useToolsStore();
// 场景状态
const sceneStore = useSceneStore();
// 是否显示场景管理器
const showSceneManager = ref(false);

// 根据工具key获取对应的图标组件
const getToolIcon = (toolKey: string) => {
	switch (toolKey) {
		case 'select':
			return h(FullscreenOutlined);
		case 'add-car':
			return h(CarOutlined);
		case 'delete':
			return h(DeleteOutlined);
		default:
			return h(CarOutlined);
	}
};

// 选择工具
const selectTool = (key: string) => {
	toolsStore.setActiveTool(key);
};

// 保存当前场景
const saveCurrentScene = () => {
	sceneStore.saveCurrentScene();
};
</script>

<style scoped>
.toolbar {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.tool-text {
	margin-left: 5px;
}
.toolbar-tool{
	margin: 5px auto;
}
.ant-divider-vertical {
	height: 24px;
}
</style>
